<template>
	<view class="idle-details-page" v-if="selectOrder && selectOrder.orderId">
		<bar-title bgColor="bg-white"
			:isBack="true"
			:isSolid="false"
		>
			<block slot="content">选择退款类型</block>
		</bar-title>
		
	
		<!-- 商品 -->
		<view class="goods-section" v-if="selectOrder.productId">
			<!-- 二手剧本 -->
			<view class="scen-group">
				<view class="scen2  text-gray">
					<view class="scen-img">
						<image :src="selectOrder.productIcon" mode="aspectFill"></image>
					</view>
					<view class="scen-info">
						<view class="scen-info-title">
							<text class="title">{{selectOrder.scenName}}</text>
							<text  class='cu-tag bg-cyan round sm'>{{selectOrder.scenNum}}人本</text>
						</view>
						<view class="publisher">发行商:{{selectOrder.scriptPublisher}}</view>
						<view class="text-price">{{selectOrder.productDiscountPrice}}</view>
					</view>
					<view class="num"><text class="text-xs">x</text>1</view>
				</view>
			</view>
			
		</view>
		
		<view class="cu-list menu" >
			<view class="cu-item">
				<view class="content ">
					<text class="text-black text-bold">选择退款类型</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="onRefund('1')">
				<view class="refund-type">
					<image class="icon" src="/static/img/ic_order_refund.png" mode="aspectFit"></image>
					<view>
						<view class="title">我要退款(无需退货)</view>
						<view class="desc">没收发货，或与卖家协商同意不用退货只退款</view>
					</view>
				</view>
			</view>
			<view class="cu-item arrow" @click="onRefund('2')">
				<view class="refund-type">
					<image class="icon" src="/static/img/ic_order_returngoods.png" mode="aspectFit"></image>
					<view>
						<view class="title">我要退款退货</view>
						<view class="desc">已收到货或已发货，需要退还收到的货物</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	computed: {
		...mapState(['selectOrder']),
	},
	methods: {
		onRefund(type) {
			this.$jumpPages('orderIdleRefund', {
				type
			})
		},
	},
	
}
</script>

<style lang="scss" scoped>
.goods-section {
	background: #F8FAFF;
	.scen-group{
		padding: 20rpx 30rpx;
	}
	.scen2{
		display: flex;
		position: relative;
		padding-bottom: 20rpx;
		
		.scen-img{
			width: 120rpx;
			height: 165rpx;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			position: relative;
			background: #F5F5F5;
			border-radius: 10rpx;
			image{
				border-radius: 10rpx;
				width: 120rpx;
				height: 165rpx;
			}
		}
		.scen-info{
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position: relative;
			padding-left: 15px;
			font-size: 14px;
		}
		.scen-info-title{
			line-height: 20px;
			margin-bottom: 24rpx;
			.title{
				font-size: 36rpx;
				color: #000;
				font-weight: 700;
				margin-right: 27rpx;
			}
		}
		.publisher{
			margin-bottom: 30rpx;
			font-size: 24rpx;
		}
		.text-price{
			color: #E42C2C;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	
}
.refund-type{
	display: flex;
	height: 140rpx;
	align-items: center;
	.icon{
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}
	.title{
		color: #000000;
		font-size: 30rpx;
		margin-bottom: 15rpx;
		font-weight: 700;
	}
	.desc{
		color: #909090;
		font-size: 24rpx;
		
	}
}
</style>
